/*
鼠标放上去生成一个div>img
*/


$(function () {
    let imgBig = (function () {
        // 全局变量定义
        let $ul = $('ul'),
            $tooltip = null

        // 获取数据querydata
        let queryData = function () {
            return new Promise((resolve, reject) => {
                // let xhr = new XMLHttpRequest()
                // xhr.open('get', 'img.json', true) //true异步
                // xhr.onreadystatechange = function () {
                //     if (xhr.readyState == 4 && xhr.status == 200) {
                //         resolve(JSON.parse(xhr.responseText))
                //     }
                // }
                // xhr.send(null)


                // 异步代码
                $.ajax({
                    type: 'get',
                    url: "../img.json",
                    dataType: 'json', //请求回来的数据自动解析为json对象
                    // async: true,
                    success: data => resolve(data),
                    error: msg => reject(msg)

                })
            })
        }

        // bindHtml绑定数据
        let bindHtml = function (data) {
            console.log(data)

            let listr = ''
            data.forEach(({ surl, burl, title, alt }) => listr += ` <li><a href=${burl} class="tooltip" title="${title}"><img src=${surl} alt="${alt}" /></a></li>`)
            $ul.html(listr)
            listr = ''
            $tooltip = $('.tooltip')
        }
        // 大图展示
        let showBig = function () {

            let x = 10,
                y = 10

            $tooltip.mouseenter(function (e) {
                // 新传一个div+img图片。
                $(`<div id="tooltip"><img src=${$(this).attr('href')}  /><br/>${$(this).attr('title')}</div>`).appendTo($('body'))
                $('#tooltip').css({ left: e.pageX + x, top: e.pageY + y })
                // 消除a链接自带的文字提示
                $(this).attr('title', (index, value) => {
                    $(this).attr('mytitle', value)
                    return ''
                })


            }).mouseleave(function () {
                $('#tooltip').remove()
                $(this).attr('title', $(this).attr('mytitle'))
            })
        }

        return {
            init: function () {
                let promise = queryData()
                promise.then((data) => {
                    bindHtml(data)
                }).then(() => {
                    showBig()
                })
            }
        }
    })()
    imgBig.init()


})

// let x = 20,
//     y = 10

// $('.tooltip').mouseenter(function (e) {
//     $(`<div id="tooltip"><img src="${$(this).attr('href')}"  /><br/>${$(this).attr('title')}</div>`).appendTo($('body'))
//     $('#tooltip').css({ left: e.pageX + x, top: e.pageY + y })
//     // 消除a链接自带的文字提示
//     $(this).attr('title', (index, value) => {
//         $(this).attr('mytitle', value)
//         return ''
//     })


// }).mouseleave(function () {
//     $('#tooltip').remove()
//     $(this).attr('title', $(this).attr('mytitle'))
// })